<!--<template>-->
<!--  <el-breadcrumb class="bread" separator-class="el-icon-arrow-right">-->
<!--    <el-breadcrumb-item  class="icon icon-home" :to="{ path: '/' }">主页</el-breadcrumb-item>-->
<!--    <el-breadcrumb-item class="icon icon-beaker" v-for="(crumb, index) in breadcrumbs" :key="index" :to="crumb.to">-->
<!--      {{ crumb.title }}-->
<!--    </el-breadcrumb-item>-->
<!--  </el-breadcrumb>-->
<!--</template>-->
<template>
  <ul class="breadcrumb">
    <li>
      <a :class="['icon', 'icon-home', { disabled: isHomePage }]" @click.prevent="goToHome">主页</a>
    </li>
    <li v-for="(crumb, index) in breadcrumbs" :key="index">
      <a v-if="crumb.to === route.path" :class="crumb.icon">{{ crumb.title }}</a>
      <router-link v-else :to="crumb.to" :class="crumb.icon">{{ crumb.title }}</router-link>
    </li>
  </ul>
</template>

<script setup>
import { computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();
const route = useRoute();
const isHomePage = computed(() => route.path === '/');

const goToHome = () => {
  if (!isHomePage.value) {
    router.push('/');
  }
};
const breadcrumbs = computed(() => {
  const routes = [];



  // 添加当前路由的面包屑
  const matchedRoutes = route.matched;
  if (matchedRoutes) {
    matchedRoutes.forEach((route) => {
      if (route.meta && route.meta.title) {
        routes.push({
          title: route.meta.title,
          to: route.path
        });
      }
    });
  }

  return routes;
});

onMounted(() => {
  // 等待 Vue Router 初始化完成后再访问 $route 对象
  router.isReady().then(() => {
    const matchedRoutes = route.matched;

    // 确保 $route 对象的匹配路由已经定义
    if (matchedRoutes) {
      // 在这里处理 $route 对象
      // 例如：console.log(matchedRoutes);
    }
  });
});
</script>
<style scoped>
.breadcrumb {
  list-style: none;
  display: inline-block;
}

.breadcrumb .icon {
  font-size: 14px;
}

.breadcrumb li {
  float: left;
  margin-right: 23px;
}

.breadcrumb li a {
  color: #fff;
  display: block;
  background: #3498db;
  text-decoration: none;
  position: relative;
  height: 40px;
  line-height: 40px;
  padding: 0 10px 0 5px;
  text-align: center;
}

.breadcrumb li:nth-child(even) a {
  background-color: #2980b9;
}

.breadcrumb li:first-child a {
  padding-left: 15px;
  border-radius: 4px 0 0 4px;
}

.breadcrumb li:last-child a {
  padding-right: 15px;
  border-radius: 0 4px 4px 0;
}

.breadcrumb li a:before,
.breadcrumb li a:after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #3498db;
  border-width: 20px 10px;
  width: 0;
  height: 0;
}

.breadcrumb li a:before {
  left: -20px;
  border-left-color: transparent;
}

.breadcrumb li a:after {
  left: 100%;
  border-color: transparent;
  border-left-color: #3498db;
}

.breadcrumb li a:hover {
  background-color: #1abc9c;
}

.breadcrumb li a:hover:before {
  border-color: #1abc9c;
  border-left-color: transparent;
}

.breadcrumb li a:hover:after {
  border-left-color: #1abc9c;
}

.breadcrumb li a:active {
  background-color: #16a085;
}

.breadcrumb li a:active:before {
  border-color: #16a085;
  border-left-color: transparent;
}

.breadcrumb li a:active:after {
  border-left-color: #16a085;
}
</style>